<!--
 * @Author: wangshuguang
 * @Date: 2022-06-07 16:17:47
 * @LastEditTime: 2022-07-06 16:07:31
 * @LastEditors: wangshuguang
 * @Description: 超级会员新增商户
-->

<template>
  <div class="supAddMerc">
    <HeaderComp  title="增加合作商名额" />
    <div class="plugContent">
      <!-- 基础信息 -->
      <div class="plugIntoItem">
        <div class="title">基础信息</div>
        <ul >
          <li>商家：{{ plugInfo.merName }}</li>
          <li>名额：{{ `${plugInfo.usedMerQuota}/${plugInfo.totalMerQuota}` }}</li>
        </ul>
      </div>
      <!-- 费用明细 -->
      <div class="plugIntoItem">
        <div class="title">申请&费用明细</div>
        <div class="mercNum">
          增加合作商家名额
          <div class=" mercNumInput">
            <input  v-model="mercNum" type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" @change="numChange">
          </div>
          个,
          <span class="mercNumTip" @click="standardVis = true" v-show="calcData.totalAmt">查看收费标准</span>
        </div>
        <ul >
          <li>新增名额费用合计：{{ calcData.totalAmt || 0 }}元</li>
        </ul>
      </div>
      <!-- 支付方式 没有开户金额时 无需展示 -->
      <div class="plugIntoItem payType" v-show="calcData.totalAmt">
        <div class="title">支付方式</div>
        <div class="textInfo">
          <van-radio-group v-model="payType">
            <van-radio name="ZFB" checked-color="#FFB72F">支付宝支付</van-radio>
            <van-radio :disabled="!wallNum || calcData.totalAmt > wallNum" name="WALL" checked-color="#FFB72F">钱包余额（剩余￥{{ wallNum }}）</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <!-- 支付按钮 -->
    <div class="btns">
      <!-- <div class="agreement">
        <van-radio-group v-model="agreement">
          <van-radio name="agreement" checked-color="#FFB72F" icon-size="18px">
            同意<span>插件服务协议</span>
          </van-radio>
        </van-radio-group>
      </div> -->
      <div class="submitBtn" @click="submit">
        {{ plugDetail.openAmt ? '开通并支付' : '开通' }}
      </div>
    </div>

    
    <van-dialog 
      className="supAddMercPwdDialog"
      v-model="pwdVisible" 
      show-cancel-button 
      :before-close="pwdClose">
      <div class="info">
        <div class="closeIcon"></div>
        <div class="title">请输入支付密码</div>
        <div class="payAmount">￥{{ plugDetail.openAmt }}</div>
        <div class="payTypeLabel">
          <span>支付方式</span>
          <span>钱包余额</span>
        </div>
      </div>
      <van-password-input
        :value="pwd"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
    </van-dialog>
    <!-- 数字键盘 -->
    <van-number-keyboard
      z-index="3000"
      v-model="pwd"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />

    <van-dialog v-model="standardVis" title="合作商户费用标准说明" >
      <div class="plugIntoItem standard">
        <ul class="textInfo">
          <li v-for="(item,index) of plugDetail.pluginSpecialConfs" :key="item.confId+'_'+index">
            <span v-if="item.isAddYear">超过{{ item.merNum }}个合作商户名额，每个名额加收{{ item.addYearAmt }}元</span>
            <span v-else>超过{{ item.merNum }}个合作商户名额,不加收费用</span>
          </li>
          <li v-show="!plugDetail.pluginSpecialConfs || !plugDetail.pluginSpecialConfs.length">无</li>
        </ul>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { 
  qryMerPluginDetail, 
  buyPlug,
  qryMerWallBalance,
  qryMerOpenPlugin,
  calAddMerQuotaAmt
} from "@/api/plug";
import { payFormSubmit, dateFtt } from "@/utils/utils";
import { mapGetters } from "vuex";

export default {
  data(){
    return {
      plugType: 2,
      dateFtt,
      showKeyboard: false,
      standardVis: false,
      pwdVisible: false,
      pwd: '',
      mercNum: '',
      payType: 'ZFB',
      pluginCode: 'supermember',
      plugDetail: {},
      calcData: {},
      plugInfo: {},
      wallNum: 0,
      agreement: true,
    }
  },
  mounted(){
    console.log('route supermember',this.$route)
    const { pluginCode } = this.$route.query
    this.pluginCode = pluginCode
    this.pageInit()
  },
  computed:{
    ...mapGetters(['flowQueryData'])
  },
  methods: {
    async numChange(num) {
      console.log('num', num)
      return calAddMerQuotaAmt({
        addMerNum: this.mercNum,
        pluginCode: this.pluginCode,
        type: this.plugType
      }).then(res => {
        if(res.data.data){
          this.calcData = res.data.data
          if(this.calcData.totalAmt > this.wallNum){
            this.payType = 'ZFB'
          }
        }
        console.log('res', res)
      })
    },
    async submit(){
      if (!this.agreement) {
        this.$toast('请先同意营销插件协议')
        return
      } else if(!this.mercNum || this.mercNum < 1){
        this.$toast('请输入要新增的商户名额')
        return 
      } else {
        await this.numChange(this.mercNum)
        if (this.plugDetail.openAmt) {
          // 需要支付金额
          if (this.payType == 'ZFB') {
            // 支付宝支付
            this.zfbPay()
          } else {
            // 余额支付
            this.pwdVisible = true
          }
        } else {
          // 不需要支付金额  直接调用接口
          this.wallPay()
        }
      }
    },
    zfbPay() {
      // 支付宝支付
      buyPlug({
        routing: `plugPayResult?plugType=${this.plugType}`,
        quitRouting: 'plugPayResult?payType=ZFBERR',
        addMerNum: this.mercNum,
        pluginCode: this.pluginCode,
        payAmt: this.calcData.totalAmt,
        type: this.plugType,
        payType: 'alipay',
        subject: '超级会员新增合作商户'
      }).then(res => {
        console.log('res', res)
        const { aliFrom, payNo } = res.data
        payFormSubmit(aliFrom)
      })
    },
    pwdClose(type,done){
      if(type == 'confirm'){
        console.log('type,done',type)
        this.wallPay('wallet',done)
      }else{
        this.pwd = ''
        done()
      }
    },
    wallPay(payType,done) {
      // 余额支付
      buyPlug({
        addMerAmt: this.calcData.totalAmt,
        addMerNum: this.mercNum,
        openAmt: this.plugDetail.openAmt,
        pluginCode: this.pluginCode,
        payAmt: this.calcData.totalAmt,
        'payPassword': this.pwd,
        type: this.plugType,
        payType,
        subject: '超级会员新增合作商户'
      }).then(res => {
        console.log('res',res)
        const { code, msg, data } = res.data
        if(code == 0){
          this.$router.push({
            path:'/plugPayResult',
            query: {
              ...data,
              payType: 'WALL'
            }
          })
        }else{
          this.$toast(msg)
          if(done) done(false)
        }
        // this.payResult = { ...res.data }
      })
    },
    pageInit(){
      const { merchantId,deptId, } = this.flowQueryData

      qryMerPluginDetail({
        code: this.pluginCode
      }).then(res => {
        this.plugDetail = {
          ...res.data.data
        }
        console.log('plugDetail', this.plugDetail)
      })
      
      qryMerOpenPlugin({
        code: this.pluginCode
      }).then(res => {
        this.plugInfo = {
          ...res.data.data
        }
        console.log('qryMerOpenPlugin', this.plugInfo)
      })
      // 获取余额
      qryMerWallBalance().then(res => {
        this.wallNum = res.data.data || 0
      })
    }
  }
}
</script>

<style  lang="less" scoped>
.supAddMercPwdDialog{
  top: 30%;
  .info{
    padding: 20px;
    .title{
      font-size: 32px;
      color: #131313;
      text-align: center;
    }
    .payAmount{
      font-size: 60px;
      color: #131313;
      text-align: center;
      margin-bottom: 67px;
    }
    .payTypeLabel{
      display: flex;
      justify-content: space-between;
      color: #131313;
      opacity: 0.7;
      margin-bottom: 60px;
    }
  }
}
.supAddMerc{
  height: 100%;
  .plugIntoItem{
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      &.standard{
        padding: 20px;
      }
      &.special{
        .textInfo{
          color: #131313;
          opacity: 0.6;
          font-size: 28px;
          div{
            margin-bottom: 10px;
          }
        }
      }
      &.payType{
        .textInfo{
          color: #131313;
          font-size: 28px;
          font-weight: bold;
          .van-radio{
            margin-bottom: 27px;
          }
        }
      }
      .total{
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 30px;
        span{
          color: #FFBB1C;
        }
      }
      .mercNum{
        font-size: 28px;
        margin-bottom: 20px;
        .mercNumTip{
          color: #FFBB1C;
          text-decoration:underline
        }
        .mercNumInput{
          display: inline-block;
          border: 2px solid #CACACA;
          padding: 0 10px;
          input{
            display: inline-block;
            width: 100px;
            height: 54px;
            border: none;
          }
        }
      } 
      .title{
        color: #131313;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 30px;
      }
      .textInfo{
        .van-checkbox{
          margin-bottom: 21px;
          font-size: 28px;
          color: #131313;
        }
      }
      ul{
        color: #131313;
        opacity: 0.6;
        font-size: 28px;
        padding-left: 30px;
        li{
          list-style: disc;
          margin-bottom: 20px;
        }
      }
    }
  .plugContent{
    padding: 37px;
  }
  .btns{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .agreement{
      margin-bottom: 40px;
      font-size: 26px;
      display: flex;
      justify-content: center;
    }
    .submitBtn{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 98px;
      color: #fff;
      font-size: 32px;
      background: #FFB72F;
    }
  }
}
</style>